<!DOCTYPE html>
<html>
	<head>
		<title>下拉菜单实例</title>
		<meta charset="utf-8">
		<style>
			.dropbtn {
				background-color: #4CAF50;
				color: white;
				padding: 16px;
				font-size: 16px;
				border: none;
				cursor: pointer;
			}

			.dropdown {
				position: relative;
				display: inline-block;
			}

			.dropdown-content {
				display: none;
				position: absolute;
				background-color: #f9f9f9;
				min-width: 160px;
				box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
			}

			.dropdown-content a {
				color: black;
				padding: 12px 16px;
				text-decoration: none;
				display: block;
			}

			.dropdown-content a:hover {
				background-color: #f1f1f1
			}

			.dropdown:hover .dropdown-content {
				display: block;
			}

			.dropdown:hover .dropbtn {
				background-color: #3e8e41;
			}
		</style>
	</head>
	<body>

		<h2>下拉菜单</h2>
		<p>鼠标移动到按钮上打开下拉菜单。</p>

		<div class="dropdown">
			<button class="dropbtn">下拉菜单</button>
			<div class="dropdown-content">
				<a href="//www.baidu.com">百度</a>
				<a href="//www.taobao.com">阿里</a>
				<a href="//www.qq.com">腾讯</a>
			</div>
		</div>

	</body>
</html>
